<!--
 * @Descripttion: 平台公告
 * @version: v1.0.0
 * @Author: 穆宏宇
 * @Date: 2021-01-26 13:09
 * @LastEditors: Administrator
 * @LastEditTime: 2021-01-26 13:09
-->
<template>
	<div class="achievement moneyAdView">
		<!-- <transition name="test-slide-fade">
			<template v-if="showNotice == 1">
				<div class="info">
					<p class="title">优采平台通知：<a class="closeIt" @click="showNotice = 0">关闭</a></p>
					<div class="infoContent">
						<p class="newsTitle" v-html="dict.noticeTitle"></p>
						<div style="width: 100%;overflow: hidden;margin-top: 10px;">
							<p class="newsUnit">设备资材采购中心-商城业务部</p>
							<p class="newsTime" v-html="'发布时间:'+dict.publishTime.replace('T','  ')"></p>
						</div>
						<p class="newsContent" v-html="dict.content"></p>
					</div>
				</div>
			</template>
		</transition> -->
		
		<div class="moneyView">
			<div class="item">
				<p class="title">{{numDict.bndljcje}}<a>万</a></p>
				<p class="desc">本年度累计成交额</p>
			</div>
			<div class="item">
				<p class="title">{{numDict.bndljcjbs}}<a>笔</a></p>
				<p class="desc">本年度累计成交笔数</p>
			</div>
			<div class="item">
				<p class="title">{{numDict.qbljcje}}<a>万</a></p>
				<p class="desc">累计成交额</p>
			</div>
			<div class="item">
				<p class="title">{{numDict.qbljcjbs}}<a>笔</a></p>
				<p class="desc">累计成交笔数</p>
			</div>
		</div>
		<div class="adView">
			<p class="title">平台公告<span @click="goMoreNews()">更多 ></span></p>
			<div class="item" v-for="item in tableData" @click="goNews(item)">
				<span>通知</span>
				<a>{{item.noticeTitle}}</a>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		queryUnitenotices,
		olistNum
	} from "@/api/mall.api";
	

	export default {
		name: "achievement",
		components: {},
		props: {},
		data() {
			return {
				tableData: [],
				searchData: {
					current: 1,
					size: 3,
					noticeType: 3
				},
				numDict:{},
				showNotice:0,
				dict:{}
			}
		},
		computed: {},
		watch: {},
		filters: {},
		created() {
			var that = this;
			setTimeout(function() {
				that.showNotice = 1;
			}, 1000);
		},
		mounted() {
			this.getNoticeList();
			this.getOrderListNum();
		},
		methods: {

			goNews(item) {
				console.log(item);
				this.$router.push({
					path: "/notice-details?id=" + item.id
				})
			},
			goMoreNews() {
				this.$router.push({
					path: "/notice-list?title=平台公告&pageType=3"
				})
			},
			getNoticeList() {
				var that = this;
				queryUnitenotices(that.searchData).then(res => {
					that.tableData = res.records
					if(that.tableData.length>0){
						that.dict = that.tableData[0]
					}
				})
			},
			getOrderListNum(){
				var that = this;
				olistNum().then(res => {
					// 后台没返回值
					if(!res.qbljcje){
						res.qbljcje = 0;
					}
					// 后台没返回值
					if(!res.bndljcje){
						res.bndljcje = 0;
					}
					that.numDict = res;
					that.numDict.qbljcje = (that.numDict.qbljcje/10000).toFixed(2);
					that.numDict.bndljcje = (that.numDict.bndljcje/10000).toFixed(2);
					
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.moneyAdView {
		width: 100%;
		overflow: hidden;
		margin-top: 10px;

		.moneyView {
			float: left;
			width: 830px;
			height: 140px;
			background-image: url(../../../assets/mall-images/numberBg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.item {
				width: 25%;
				float: left;
				height: 140px;

				.title {
					font-size: 28px;
					font-weight: bold;
					margin-top: 45px;
					text-align: center;

					a {
						font-size: 14px;
						margin-left: 10px;
					}
				}

				.desc {
					font-size: 14px;
					text-align: center;
					margin-top: 20px;
				}
			}
		}

		.adView {
			float: right;
			width: 360px;
			background-image: url(../../../assets/mall-images/adBg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10px;
			height: 140px;

			.title {
				height: 40px;
				line-height: 40px;
				font-weight: bolder;

				span {
					float: right;
					margin-right: 10px;
					font-weight: normal;
					cursor: pointer;
				}
			}

			.item {
				width: 100%;
				overflow: hidden;
				font-size: 12px;
				margin-bottom: 10px;

				span {
					float: left;
					width: 35px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					background: orange;
					border-radius: 5px;
				}

				a {
					height: 20px;
					line-height: 20px;
					display: block;
					overflow: hidden;
					float: left;
					margin-left: 10px;
					width: calc(100% - 50px);
					cursor: pointer;
				}
			}
		}
	}
	
		.info {
			position: absolute;
			width: 30%;
			left: 35%;
			top: 200px;
			background: #fff;
			z-index: 99999999;
		}
	
		.info .title {
			text-align: left;
			font-weight: bold;
			background: #da0734;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-indent: 20px;
			margin: 0px;
		}
	
		.infoContent {
			border: 1px solid #ccc;
			border-top: none;
			padding: 10px;
			.newsTitle{
				text-align: center;
				font-weight: bold;
				font-size: 16px;
			}
			.newsContent{
				text-indent: 2rem;
				margin-top: 10px;
			}
			.newsUnit{
				float: right;
				font-size: 12px;
			}
			.newsTime{
				float: left;
				font-size: 12px;
			}
		}
	
		.closeIt {
			cursor: pointer;
			float: right;
			font-weight:normal;
			margin-right: 10px;
		}
	
	
	.test-slide-fade-enter-active {
		transition: all 1s ease;
	}
	.test-slide-fade-leave-active {
		transition: all .5s ease;
	}
	.test-slide-fade-enter,.test-slide-fade-leave-to{
		/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ 
	  	transform: translateY(200px);
	  	opacity: 0;
	}
</style>
